<template>


  <div class="vue-box">

    <div>
      <el-card class="box-card" style="width: 100%;height: 100px; margin: 15px 0;">
        <el-descriptions size="medium">
          <el-descriptions-item label="订单编号">{{ orderObject.id }}</el-descriptions-item>
          <el-descriptions-item label="下单时间">{{ orderObject.createTime }}</el-descriptions-item>
          <el-descriptions-item label="订单状态">{{
              orderObject.status | toStatusString(this.statusList)
            }}
          </el-descriptions-item>
          <el-descriptions-item label="预计到达日期">{{ orderObject.estimatedArrivalTime }}</el-descriptions-item>
        </el-descriptions>
      </el-card>
    </div>
    <div>
      <el-card class="box-card" style="width: 100%;height: 350px; margin: 15px 0;">
        <div slot="header" class="clearfix">
          <span>基本信息</span>
        </div>
        <el-steps direction="vertical">
          <el-step title="发货方" icon="el-icon-location"></el-step>
          <div style="height: 80px">
            <el-descriptions style="margin-left:  80px" :column="2" size="medium">
              <el-descriptions-item label="发货方姓名">{{ orderObject.senderName }}</el-descriptions-item>
              <el-descriptions-item label="发货方地址">
                {{
                  orderObject.senderProvinceName + orderObject.senderCityName  + orderObject.senderCountyName
                  }}
              </el-descriptions-item>
              <el-descriptions-item label="发货方电话">{{ orderObject.senderPhone }}</el-descriptions-item>
              <el-descriptions-item label="详细地址">{{ orderObject.senderAddress }}</el-descriptions-item>
            </el-descriptions>
          </div>
          <el-step title="收货方" icon="el-icon-aim"></el-step>
          <div style="height: 80px">
            <el-descriptions style="margin-left:  80px" :column="2" size="medium">
              <el-descriptions-item label="收货方姓名">{{ orderObject.receiverName }}</el-descriptions-item>
              <el-descriptions-item label="收货方地址">
                {{ orderObject.receiverProvinceName + orderObject.receiverCityName + orderObject.receiverCountyName }}
              </el-descriptions-item>
              <el-descriptions-item label="收货方电话">{{ orderObject.receiverPhone }}</el-descriptions-item>
              <el-descriptions-item label="详细地址">{{ orderObject.receiverAddress }}</el-descriptions-item>
            </el-descriptions>
          </div>
          <el-step title="距离：" icon="el-icon-s-flag"></el-step>
          {{ orderObject.distance }} /km
        </el-steps>
      </el-card>
    </div>
    <div>
      <el-card class="box-card" style="width: 100%;height: 130px; margin: 15px 0;">
        <div slot="header" class="clearfix">
          <span>费用信息</span>
        </div>
        <el-descriptions size="medium">
          <el-descriptions-item label="运费">{{ orderObject.amount }}元</el-descriptions-item>
          <el-descriptions-item label="支付方式">{{ orderObject.paymentMethod == 1 ? '预结' : '到付' }}
          </el-descriptions-item>
          <el-descriptions-item label="付款状态">{{ orderObject.paymentStatus == 1 ? '未付' : '已付' }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

    </div>

    <div>
      <el-card class="box-card" style="width: 100%;height: 200px; margin: 15px 0;">
        <div slot="header" class="clearfix">
          <span>货品信息</span>
        </div>
        <div>
          <el-table
            :data="tableData"
            border
            style="width: 100%">

            <el-table-column
              prop="name"
              label="货品名称"
              width="180">
            </el-table-column>
            <el-table-column
              prop="quantity"
              label="货品数量">
            </el-table-column>
            <el-table-column
              prop="goodsTypeName"
              label="货品类型">
            </el-table-column>
            <el-table-column
              prop="totalWeight"
              label="重量(千克)">
            </el-table-column>
            <el-table-column
              prop="totalVolume"
              label="体积(方)">
            </el-table-column>
            <el-table-column
              prop="remark"
              label="备注">
            </el-table-column>
          </el-table>
        </div>
      </el-card>

    </div>

    <div>
      <el-card class="box-card" style="width: 100%;height: 180px; margin: 15px 0;">
        <div slot="header" class="clearfix">
          <span>取件信息</span>
        </div>
        <el-descriptions size="medium" :column="4">
          <el-descriptions-item label="所在网点">{{ this.ReceivedShipment.cname }}</el-descriptions-item>
          <el-descriptions-item label="取件类型">{{ this.ReceivedShipment.pickupType == 1 ? '取件任务' : '派件任务' }}
          </el-descriptions-item>
          <el-descriptions-item label="作业状态">{{
              this.ReceivedShipment.status | replacementJobStatus
            }}
          </el-descriptions-item>
          <el-descriptions-item label="取件快递员">{{ this.ReceivedShipment.name }}</el-descriptions-item>
          <el-descriptions-item label="快递员电话">{{ this.ReceivedShipment.mobile }}</el-descriptions-item>
          <el-descriptions-item label="预计取件时间">{{ this.ReceivedShipment.estimatedEndTime }}</el-descriptions-item>
          <el-descriptions-item label="取件完成时间">{{ this.ReceivedShipment.actualEndTime }}</el-descriptions-item>
        </el-descriptions>
      </el-card>
    </div>
    <div style="width: 100%;text-align: center">
      <Button type="primary" style="width: 100px" to="/sp-logistics/sp-orderManagement">返回</Button>
    </div>

  </div>
</template>


<script>

import axios from "axios";

export default {
  data() {
    return {
      id: this.$route.query.id,
      tableData: [],
      orderObject: {},
      statusList: [
        {
          value: '1',
          label: '待取件'
        }, {
          value: '2',
          label: '已取件'
        }, {
          value: '3',
          label: '网点入库'
        }, {
          value: '4',
          label: '待装车'
        }, {
          value: '5',
          label: '运输中'
        }, {
          value: '6',
          label: '网点出库'
        }, {
          value: '7',
          label: '待派送'
        }, {
          value: '8',
          label: '派送中'
        }, {
          value: '9',
          label: '已签收'
        }, {
          value: '10',
          label: '拒收'
        }, {
          value: '11',
          label: '已取消'
        }], //订单状态
      transportOrderId: '',//运单id
      ReceivedShipment: {},
    }
  },
  async created() {
    await this.queryPdTransportOrderByOrderId();
  },
  filters: {

    //替换订单状态
    toStatusString: function (row, statusList) {
      let filter = statusList.filter(s => row == s.value);
      return filter.length > 0 ? filter[0].label : '';
    },
    replacementJobStatus: function (row) {
      let filter = ''

      console.log(row)
      switch (row) {
        case '1':
          filter = '待执行';
          break;
        case '2':
          filter = '进行中'
          break;
        case '3':
          filter = '待确认'
          break;
        case '4':
          filter = '已完成'
          break;
        case '5':
          filter = '已取消'
          break;
      }
      return filter;
    }


  },
  methods: {

    /**
     * 根据订单查询运单id
     * @returns {Promise<void>}
     */
    async queryPdTransportOrderByOrderId() {
      let rsp = await axios.post("/api/pd-aggregationcjj/pd-transport-order/queryPdTransportOrderByOrderId/" + this.id);
      this.transportOrderId = rsp.data.data;
      await this.queryPdTaskPickupDispatchByOrderId()
    },

    /**
     * 根据运单id查询取件寄件表
     * @returns {Promise<void>}
     */

    async queryPdTaskPickupDispatchByOrderId() {

      var rsp = await axios.post("/api/pd-workyc/pd-transport-order/queryPickInfoById/" + this.transportOrderId.id + "/1");
      this.ReceivedShipment = rsp.data;
      console.log(this.ReceivedShipment)
      await this.queryOrderInfo();
    },
    /**
     * 根据运单id查询订单基本信息
     * @returns {Promise<void>}
     */
    async queryOrderInfo() {
      let result = await axios.post("/api/pd-workyc/pd-transport-order/queryOrderBasicInfo/" + this.transportOrderId.id);
      this.orderObject = result.data;
      var rsp = await axios.post("/api/pd-workyc/pd-transport-order/queryOrderCargoInfoById/" + this.transportOrderId.id);
      this.tableData = rsp.data;

    },


  }
}
</script>
<style scoped>

</style>
